<template>
  <div>
    <a-card style="margin-top: 24px;" :bordered="false">
      <template>
        <div class="ant-pro-page-header-search">
          <div class="tabTitle">
            采集者信息待审核列表
          </div>
          <a-input-search placeholder="请输入" style="width: 40%; max-width: 300px" @search="onSearch" />
        </div>
        <router-view />
      </template>
      <a-list
        size="large"
        :pagination="{showSizeChanger: false, showQuickJumper: true, pageSize: 5, total: 50}"
      >
        <a-list-item :key="index" v-for="(item, index) in dataTest" class="listContainer">
          <!-- description slot 考虑渲染格式的问题 -->
          <div class="titleContainer">
            <a slot="title" class="adminName">{{ item.name }}</a>
            <a-tag class="stateTag">注册</a-tag>
            <div class="applyTime">
              <span class="applyTimeTitle">申请时间</span>
              <span class="applyTimeDetail">{{ item.startAt }}</span>
            </div>
            <div class="confirmBtn">
              <a-button type="primary" class="leftBtn">通过</a-button>
              <a-button>不通过</a-button>
            </div>
          </div>
          <div class="contentContainer">
            <div class="contentLeftList">
              性别：<span>{{ item.sex === 1 ? '男' : '女' }}</span>
            </div>
            <div class="contentRightList">
              年龄：<span>{{ item.age }}</span>
            </div>
            <div class="contentLongList">
              身份证号：<span>{{ item.cardID }}</span>
            </div>
            <div class="contentLeftList">
              银行卡：<span>{{ item.BCID }}</span>
            </div>
            <div class="contentRightList">
              开户行：<span>{{ item.BankName }}</span>
            </div>
          </div>
        </a-list-item>
        <!-- 采用分页 但是可以用两个a-button -->
        <!-- <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
          <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
        </div> -->
      </a-list>
    </a-card>
  </div>
</template>

<script>
import { TagSelect, StandardFormRow, ArticleListContent } from '@/components'
import IconText from './components/IconText'
const TagSelectOption = TagSelect.Option
const dataTest = []
dataTest.push({
  name: '袁甜甜',
  sex: 2,
  age: 18,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13'
})
dataTest.push({
  name: '朱宇',
  sex: 1,
  age: 18,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13'
})
dataTest.push({
  name: '孙光浩',
  sex: 1,
  age: 18,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13'
})
dataTest.push({
  name: '乌总',
  sex: 1,
  age: 18,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13'
})
dataTest.push({
  name: '王建源',
  sex: 1,
  age: 18,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13'
})
// dataTest.push({
//   title: '666',
//   startAt: '2021-07-25 23:13'
// })
// dataTest.push({
//   title: '777',
//   startAt: '2021-07-26 22:44'
// })
// dataTest.push({
//   title: '888',
//   startAt: '2021-07-26 22:44'
// })
// dataTest.push({
//   title: '999',
//   startAt: '2021-07-26 22:44'
// })
// dataTest.push({
//   title: '1010',
//   startAt: '2021-07-26 22:44'
// })
// const owners = [
//   {
//     id: 'wzj',
//     name: '我自己'
//   },
//   {
//     id: 'wjh',
//     name: '吴家豪'
//   },
//   {
//     id: 'zxx',
//     name: '周星星'
//   },
//   {
//     id: 'zly',
//     name: '赵丽颖'
//   },
//   {
//     id: 'ym',
//     name: '姚明'
//   }
// ]

export default {
  components: {
    TagSelect,
    TagSelectOption,
    StandardFormRow,
    ArticleListContent,
    IconText
  },
  data () {
    return {
      dataTest,
    //   owners,
      loading: true,
      loadingMore: false,
      data: [],
      search: true,
      form: this.$form.createForm(this)
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    getList () {
      this.$http.get('/list/article').then(res => {
        console.log('res', res)
        this.data = res.result
        this.loading = false
      })
    },
    loadMore () {
      this.loadingMore = true
      this.$http.get('/list/article').then(res => {
        this.data = this.data.concat(res.result)
      }).finally(() => {
        this.loadingMore = false
      })
    },
    setOwner () {
      const { form: { setFieldsValue } } = this
      setFieldsValue({
        owner: ['wzj']
      })
    },
    onSearch (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  .tabTitle {
    display: flex;
    // padding-left: 2%;
    font-size: 16px;
    width: 70%;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20%;
  }
}

.listContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  // height: 160px;
  // border: solid 1px blue;
  .titleContainer {
    width: 100%;
    display: flex;
    align-items: center;
    // border: solid 1px blue;
    .adminName {
      color: black;
      width: 12%;
      display: flex;
      align-items: center;
      font-size: 16px;
    }
    .stateTag {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
    }
    .applyTime {
      font-size: 16px;
      display: flex;
      max-width: 50%;
      min-width: 40%;
      margin-left: 10%;
      align-items: center;
      .applyTimeTitle {
         margin-right: 1%;
      }
    }
    .confirmBtn {
      display: flex;
      margin-left: 20%;
      .leftBtn {
        margin-right: 20%;
      }
    }
  }
  .contentContainer {
    // border: solid 1px orange;
    width: 100%;
    height: 7em;
    display: flex;
    flex-flow: row wrap;
    margin-top: 1%;
    .contentLeftList {
      width: 40%;
    }
    .contentLongList {
      width: 100%;
    }
    .contentRightList {
      width: 60%;
    }
  }
}

</style>
